<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客标签</title>
    <!-- Semantic UI 框架 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
    <!-- 自己编写的 CSS -->
    <link rel="stylesheet" href="../static/css/me.css">
</head>

<body>
    <!-- 导航 -->
    <nav class="ui inverted attached segment me-padded-tb-mini me-shadow">
        <div class="ui container">
            <div class="ui inverted secondary stackable menu">
                <h1 class="ui item header teal">江南笑书生</h1>
                <a href="index.html" class="ui item me-mobile-hide me-item">
                    <i class="home icon"></i>首页
                </a>
                <a href="categories.html" class="ui item me-mobile-hide me-item">
                    <i class="idea icon"></i>分类
                </a>
                <a href="#" class="ui item active me-mobile-hide me-item">
                    <i class="tags icon"></i>标签
                </a>
                <a href="archives.html" class="ui item me-mobile-hide me-item">
                    <i class="archive icon"></i>归档
                </a>
                <a href="aboutme.html" class="ui item me-mobile-hide me-item">
                    <i class="info icon"></i>关于我
                </a>
                <div class="ui right item me-mobile-hide me-item">
                    <div class="ui icon input">
                        <input type="text" placeholder="搜索...">
                        <i class="search link icon"></i>
                    </div>
                </div>
            </div>
        </div>
        <!-- 移动端控制菜单隐藏与显示 -->
        <!-- <a href="#" class="ui menu toggle black icon button me-right-top me-mobile-show">
            <i class="sidebar icon"></i>
        </a> -->
        <button class="ui secondary icon button menu toggle me-right-top me-mobile-show">
            <i class="sidebar icon"></i>
        </button>
    </nav>

    <!-- 中间内容 -->
    <div class="ui me-padded-tb-large me-container-small">
        <div class="ui container">
            <!-- header -->
            <div class="ui segment top attached secondary">
                <div class="ui two column grid middle aligned">
                    <div class="column left aligned">
                        <h3 class="ui header teal">标签</h3>
                    </div>
                    <div class="column right aligned">
                        共 <h3 class="ui header orange me-inline-block">16</h3> 个
                    </div>
                </div>
            </div>
            <div class="ui segment bottom attached me-padded-tb-large">
                <div class="ui tag labels">
                    <a href="#" target="_blank" class="ui label">
                        Spring<div class="detail">6</div>
                    </a>
                    <a href="#" target="_blank" class="ui teal label">
                        Spring Boot<div class="detail">6</div>
                    </a>
                    <a href="#" target="_blank" class="ui label">
                        MyBatis<div class="detail">6</div>
                    </a>
                    <a href="#" target="_blank" class="ui label">
                        数据结构与算法<div class="detail">6</div>
                    </a>
                </div>
            </div>
            <!-- 博客列表 -->
            <div class="ui padded teal segment top attached">
                <div class="ui padded vertical segment">
                    <div class="ui mobile reversed stackable grid">
                        <!-- 左边文字 -->
                        <div class="eleven wide column">
                            <h3 class="ui header">
                                <a href="#" target="_blank" style="color: rgb(33, 33, 33);">
                                    你真的理解什么是财富自由吗？
                                </a>
                            </h3>
                            <p class="me-text">
                                正确做好任何一件事情的前提是清晰、正确地理解目标。而事实是，
                                我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有
                            </p>
                            <div class="ui stackable grid">
                                <div class="row">
                                    <div class="twelve wide column left aligned">
                                        <div class="ui horizontal link list small">
                                            <div class="item middle aligned">
                                                <img class="ui avatar image" src="../static/img/avatar.png">
                                                <div class="content">江南笑书生</div>
                                            </div>
                                            <div class="item middle aligned">
                                                <i class="calendar alternate icon"></i> 2019-10-01
                                            </div>
                                            <div class="item middle aligned">
                                                <i class="eye icon"></i> 256
                                            </div>
                                        </div>
                                    </div>
                                    <div class="four wide column right aligned">
                                        <!-- <a href="#" target="_blank" class="ui label teal basic me-padded-tiny">
                                            原创
                                        </a> -->
                                        <div class="ui label teal basic me-padded-tiny">原创</div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="column">
                                        <div class="ui mini labels">
                                            <a href="#" target="_blank" class="ui left pointing basic label">
                                                Spring
                                            </a>
                                            <a href="#" target="_blank" class="ui left pointing teal basic label">
                                                Spring Boot
                                            </a>
                                            <a href="#" target="_blank" class="ui left pointing basic label">
                                                MyBatis
                                            </a>
                                            <a href="#" target="_blank" class="ui left pointing basic label">
                                                数据结构与算法
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 右边图片 -->
                        <div class="five wide column">
                            <a href="#" class="" target="_blank">
                                <img src="https://picsum.photos/id/1024/300/200" alt="" class="ui rounded image">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="ui padded vertical segment">
                    <div class="ui mobile reversed stackable grid">
                        <!-- 左边文字 -->
                        <div class="eleven wide column">
                            <h3 class="ui header">
                                <a href="#" target="_blank" style="color: rgb(33, 33, 33);">
                                    你真的理解什么是财富自由吗？
                                </a>
                            </h3>
                            <p class="me-text">
                                正确做好任何一件事情的前提是清晰、正确地理解目标。而事实是，
                                我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有
                            </p>
                            <div class="ui stackable grid">
                                <div class="row">
                                    <div class="twelve wide column left aligned">
                                        <div class="ui horizontal link list small">
                                            <div class="item middle aligned">
                                                <img class="ui avatar image" src="../static/img/avatar.png">
                                                <div class="content">江南笑书生</div>
                                            </div>
                                            <div class="item middle aligned">
                                                <i class="calendar alternate icon"></i> 2019-10-01
                                            </div>
                                            <div class="item middle aligned">
                                                <i class="eye icon"></i> 256
                                            </div>
                                        </div>
                                    </div>
                                    <div class="four wide column right aligned">
                                        <!-- <a href="#" target="_blank" class="ui label teal basic me-padded-tiny">
                                            原创
                                        </a> -->
                                        <div class="ui label teal basic me-padded-tiny">原创</div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="column">
                                        <div class="ui mini labels">
                                            <a href="#" target="_blank" class="ui left pointing basic label">
                                                Spring
                                            </a>
                                            <a href="#" target="_blank" class="ui left pointing teal basic label">
                                                Spring Boot
                                            </a>
                                            <a href="#" target="_blank" class="ui left pointing basic label">
                                                MyBatis
                                            </a>
                                            <a href="#" target="_blank" class="ui left pointing basic label">
                                                数据结构与算法
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 右边图片 -->
                        <div class="five wide column">
                            <a href="#" class="" target="_blank">
                                <img src="https://picsum.photos/id/1024/300/200" alt="" class="ui rounded image">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="ui padded vertical segment">
                    <div class="ui mobile reversed stackable grid">
                        <!-- 左边文字 -->
                        <div class="eleven wide column">
                            <h3 class="ui header">
                                <a href="#" target="_blank" style="color: rgb(33, 33, 33);">
                                    你真的理解什么是财富自由吗？
                                </a>
                            </h3>
                            <p class="me-text">
                                正确做好任何一件事情的前提是清晰、正确地理解目标。而事实是，
                                我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有
                            </p>
                            <div class="ui stackable grid">
                                <div class="row">
                                    <div class="twelve wide column left aligned">
                                        <div class="ui horizontal link list small">
                                            <div class="item middle aligned">
                                                <img class="ui avatar image" src="../static/img/avatar.png">
                                                <div class="content">江南笑书生</div>
                                            </div>
                                            <div class="item middle aligned">
                                                <i class="calendar alternate icon"></i> 2019-10-01
                                            </div>
                                            <div class="item middle aligned">
                                                <i class="eye icon"></i> 256
                                            </div>
                                        </div>
                                    </div>
                                    <div class="four wide column right aligned">
                                        <!-- <a href="#" target="_blank" class="ui label teal basic me-padded-tiny">
                                            原创
                                        </a> -->
                                        <div class="ui label teal basic me-padded-tiny">原创</div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="column">
                                        <div class="ui mini labels">
                                            <a href="#" target="_blank" class="ui left pointing basic label">
                                                Spring
                                            </a>
                                            <a href="#" target="_blank" class="ui left pointing teal basic label">
                                                Spring Boot
                                            </a>
                                            <a href="#" target="_blank" class="ui left pointing basic label">
                                                MyBatis
                                            </a>
                                            <a href="#" target="_blank" class="ui left pointing basic label">
                                                数据结构与算法
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 右边图片 -->
                        <div class="five wide column">
                            <a href="#" class="" target="_blank">
                                <img src="https://picsum.photos/id/1024/300/200" alt="" class="ui rounded image">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- bottom -->
            <div class="ui segment bottom attached">
                <div class="ui two column grid middle aligned">
                    <div class="column left aligned">
                        <a href="#" class="ui button mini basic teal">上一页</a>
                    </div>
                    <div class="column right aligned">
                        <a href="#" class="ui button mini basic teal">下一页</a>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- 底部 -->
    <footer class="ui inverted vertical segment me-padded-tb-massive">
        <div class="ui container center aligned">
            <div class="ui inverted divided stackable grid">
                <div class="three wide column">
                    <!-- <h4 class="ui inverted header"><i class="wechat icon"></i>与我联系</h4> -->
                    <div class="ui inverted link list">
                        <div class="item">
                            <img src="../static/img/wechat.jpg" alt="wechat" class="ui rounded image"
                                style="width: 8em;">
                        </div>
                    </div>
                </div>
                <div class="four wide column">
                    <h4 class="ui inverted header">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">用户故事</a>
                        <a href="#" class="item">用户故事</a>
                        <a href="#" class="item">用户故事</a>
                    </div>
                </div>
                <div class="four wide column">
                    <h4 class="ui inverted header">联系我</h4>
                    <div class="ui inverted link list">
                        <div class="item">
                            <i class="envelope icon"></i> Email : cplasfyin@163.com
                        </div>
                        <div class="item">
                            <i class="qq icon"></i> QQ : 2916393359
                        </div>
                        <div class="item">
                            <i class="wechat icon"></i> 微信 : DX10485
                        </div>
                        <a href="#" class="item">用户故事</a>
                    </div>
                </div>
                <div class="five wide column">
                    <h4 class="ui inverted header">江南笑书生</h4>
                    <p style="opacity: 0.6 !important;">
                        这是我的个人博客，会分享关于编程、写作、思考相关的内容，希望可以给来到这的人有所帮助
                    </p>
                </div>
            </div>
            <div class="ui inverted section divider"></div>
            <p style="opacity: 0.5 !important;">
                Copyright
                <i class="copyright outline icon"></i>
                2020 - 2021 Designed by YGQ
            </p>
        </div>
    </footer>

    <script>
        // 控制移动端导航条显示
        $('.menu.toggle').click(function () {
            $('.me-item').toggleClass('me-mobile-hide');
        });
    </script>
</body>

</html>